<script setup>
import commonForm from '@/components/commonForm.vue';
import {
  approveTaskAsync
} from '@/api/myFlow';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  //任务id
  taskId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['closeDialog'])

const handleClose = () => {
  emit('closeDialog')
}

const handleReset = () => {
  formRef.value.resetForm()
}

//保存/更新
const handleUpdate = () => {
  formRef.value.validForm(saveApproveInfo)
}

const saveApproveInfo = async () => {
  try {
    console.log('%c [  ]-41', 'font-size:13px; background:pink; color:#bf2c9f;', formData.value)
    const params = {
      taskId: props.taskId,
      ...formData.value
    }

    const res = await approveTaskAsync(params)
    if (res && res.code + '' === '200') {
      ElMessage.success('审批完成！')
      emit('closeDialog', true)
    }
  } catch (error) {
    console.log('%c [ error ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}

const dialogVisible = computed(() => props.visible)


//表单配置项
const optionList = ref([
  {
    data: {
      label: '是否同意',
      prop: 'approve'
    },
    component: 'el-switch',
    $attrs: {
      'active-text': '是',
      'inactive-text': '否'
    }
  },
  {
    data: {
      label: '审批意见',
      prop: 'comment',
    },
    component: 'el-input',
    $attrs: {
      type: 'textarea',
      row: 3,
      placeholder: '请输入审批意见',
    }
  },
])
const optionData = ref({
  approve: false,
})


//表单校验规则
const optionRuleList = ref({
  approve: [{ required: true, message: '请选择审批结果', trigger: 'blur' }],
  comment: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
})

const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}



</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" title="审批意见" width="500" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <el-card>
        <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
          @updateFormData="updateFormData">
        </commonForm>
      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn-blue" type="primary" @click="handleReset">
            重置
          </el-button>
          <el-button class="btn-green" type="primary" @click="handleUpdate">
            确认提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-button) {
  color: #fff;
  width: 100px;
  height: 35px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>